﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: #202020;
        }
    </style>
    
</head>
<body>
    <div id="singleState1_2" style="width: 665px; height: 400px; float:left;"></div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/echarts/echarts.js"></script>



<script>
    $(document).ready(function () {


        require.config({
            paths: {
                echarts: 'js/echarts/'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/gauge',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/chart/pie',
            ],
            function (ec) {
              

                var myChartsingleState1_2 = ec.init(document.getElementById('singleState1_2'));


                
                optionsingleState1_2 = {
                    title: {
                        text: '这里是标题',
                        textStyle: {
                            color: '#eee',
                            fontFamily: '微软雅黑',
                            fontWeight: 300,
                            fontSize: 18,
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        textStyle: {
                            color: '#fff',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    legend: {
                        show: false,
                        data: ['1', '2', '3', '4', '5', ],
                    },
                    toolbox: {
                        show: false
                    },
                    calculable: false,
                    backgroundColor: '#323232',
                    xAxis: [{
                        show: true,
                        type: 'value',
                        axisLine: {    // 轴线
                            lineStyle: {
                                color: '#888',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            interval: 'auto',    // {number}
                            textStyle: {
                                color: '#fff',
                                fontFamily: '微软雅黑',
                                fontSize: 13,
                            }
                        },
                        splitLine: {//中间分隔线
                            show: false,
                        },
                    }],
                    yAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: 'auto',    // {number}
                                textStyle: {
                                    color: '#fff',
                                    fontFamily: '微软雅黑',
                                    fontSize: 15,
                                }
                            },
                            axisLine: {    // 轴线
                                lineStyle: {
                                    color: '#888',
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            splitLine: {//中间分隔线
                                show: false,
                            },
                            data: ['1', '2', '3', '4', '5', '6', '7', '8']
                        },
                        //辅助x轴
                        {
                            type: 'category',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            data: ['']
                        }
                    ],
                    grid: {
                        y: 50,
                        y2: 40,
                        x: 100,
                        x2: 40,
                        borderWidth: 0,
                    },
                    series: [
                        {
                            name: '1', type: 'bar', stack: 'singleState1_2', barWidth: 20,
                            itemStyle: { normal: { color: '#cacaca', label: { show: false, } } },
                            data: [125, 147, 12, 10, 85, 75, 33, 222]
                        },
                        {
                            name: '2', type: 'bar', stack: 'singleState1_2', barWidth: 20,
                            itemStyle: { normal: { color: '#ddbd70', label: { show: false, } } },
                            data: [10, 147, 12, 85, 75, 33, 125, 222]
                        },
                        {
                            name: '3', type: 'bar', stack: 'singleState1_2', barWidth: 20,
                            itemStyle: { normal: { color: '#d8725d', label: { show: false } } },
                            data: [10, 85, 75, 33, 125, 147, 12, 111]
                        },
                        {
                            name: '4', type: 'bar', stack: 'singleState1_2', barWidth: 20,
                            itemStyle: { normal: { color: '#54d5c2', label: { show: false, } } },
                            data: [125, 147, 12, 10, 85, 75, 33, 111]
                        },
                        {
                            name: '5', type: 'bar', stack: 'singleState1_2', barWidth: 20,
                            itemStyle: { normal: { color: '#50d77b', label: { show: false, } } },
                            data: [10, 147, 12, 85, 75, 33, 125, 222]
                        },
                        {
                            name: '', type: 'bar', stack: 'singleState1_2',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'right',
                                        formatter: function (params) {
                                            for (var i = 0, l = optionsingleState1_2.yAxis[0].data.length; i < l; i++) {
                                                if (optionsingleState1_2.yAxis[0].data[i] == params.name) {
                                                    return "100";
                                                }
                                            }
                                        },
                                        textStyle: {
                                            color: '#d5d5d5'
                                        }
                                    }
                                }
                            },
                            data: ['', '', '', '', '', '', '', '']
                        }
                    ]
                }
                myChartsingleState1_2.setOption(optionsingleState1_2);


            }
        );


    })
</script>


